<template>
  <div class="musicHome">
    <BorderTitle>推荐歌手</BorderTitle>
    <div class="artist">
      <ul>
        <li v-for="(item, i) in artists" :key="i">
          <router-link :to="`/artists/${item.id}`">
            <img
              :src="item.picUrl + '?imageView=1&type=webp&thumbnail=253x0'"
            />
          </router-link>
          <div>{{ item.name }}</div>
        </li>
      </ul>
    </div>
    <div class="chose">
      <p @click="changeState1" :class="{ white: isNewSongs }">新歌速递</p>
      <p @click="changeState2" :class="{ white: isToplist }">排行榜</p>
      <p @click="changeState3" :class="{ white: iscollect }">我的收藏</p>
    </div>

    <!-- 新歌速递 -->
    <div class="newSongs" v-show="isNewSongs">
      <ul class="songlist">
        <li v-for="(item, i) in newSongsData" :key="i" @click="playMusic(item)">
          <img
            :src="item.album.picUrl + '?imageView=1&type=webp&thumbnail=253x0'"
          />
          <div class="newSongsDetail">
            <p class="songname">{{ item.name }}</p>
            <p class="artistname">歌手：{{ item.album.artists[0].name }}</p>
          </div>
          <div class="playbtn"></div>
        </li>
      </ul>
      <Loading v-if="isLoading"></Loading>
      <div class="loadingmore" @click="loadMore()">加载更多 ></div>
    </div>

    <div class="toplist" v-show="isToplist">
      <div class="list">
        <ul>
          <li v-for="(item, i) in topLists" :key="i">
            <img
              :src="item.coverImgUrl + '?imageView=1&type=webp&thumbnail=253x0'"
            />
            <router-link :to="`/playlist/${item.id}`">
              <div class="topListDetail">
                <p class="topListtitle">{{ item.name }}</p>
                <p class="description">{{ item.description }}</p>
              </div>
            </router-link>
          </li>
        </ul>
      </div>
    </div>
    <div v-show="iscollect" class="coll">
      <!-- 我的收藏-->
      <div v-if="collectHistory.length == 0" class="noContent">
        你还没有收藏歌单噢，快去收藏你喜欢的歌单吧~
      </div>
      <div v-if="collectHistory.length">
        <ul class="collectList" v-if="collectHistory.length > 0">
          <ListItem
            v-for="(sl, index) in collectHistory"
            :key="index"
            :item="sl"
          ></ListItem>
        </ul>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
import BorderTitle from "@/components/BorderTitle";
import ListItem from "@/components/ListItem";
import Loading from "@/components/Loading";

export default {
  name: "Home",
  data() {
    return {
      newSongsData: [],
      topLists: [],
      artists: [],
      newSongspage: 1,
      topListspage: 1,
      artistspage: 1,
      isLoading: false,
      collectHistory: [],
      isNewSongs: true,
      isToplist: false,
      iscollect: false,
    };
  },
  components: {
    BorderTitle,
    ListItem,
    Loading,
  },
  watch: {},
  created() {
    this.newSongs();
    this.topList();
    this.artist();

    // this.myCollection();
  },
  mounted() {
    this.myCollection();
  },
  methods: {
    changeState1() {
      this.isNewSongs = true;
      this.isToplist = false;
      this.iscollect = false;
    },
    changeState2() {
      this.isNewSongs = false;
      this.isToplist = true;
      this.iscollect = false;
    },
    changeState3() {
      this.isNewSongs = false;
      this.isToplist = false;
      this.iscollect = true;
    },
    // 新歌速递
    newSongs() {
      this.$http.get("/top/song?type=7").then((data) => {
        let trackIDs = data.data.data.slice(
          (this.newSongspage - 1) * 5,
          this.newSongspage * 5
        );
        // console.log(data);
        this.newSongsData = this.newSongsData.concat(trackIDs);
        this.isLoading = false;
      });
    },

    // 排行榜
    topList() {
      this.$http.get("/toplist").then((data) => {
        let trackIds = data.data.list.slice(
          (this.topListspage - 1) * 3,
          this.topListspage * 3
        );
        this.topLists = this.topLists.concat(trackIds);
      });
    },

    // 歌手
    artist() {
      this.$http.get("/artist/list?type=-1&area=96&initial=b").then((data) => {
        let artists = data.data.artists.slice(
          (this.artistspage - 1) * 9,
          this.artistspage * 9
        );
        this.artists = this.artists.concat(artists);
        // console.log(this.artists);
      });
    },

    playMusic(item) {
      this.$root.musicStore.musicID = item.id;
      this.$root.musicStore.currentMusic = item;
      this.$root.musicStore.picURL = item.album.picUrl;
    },

    // 收藏

    myCollection() {
      let collection = eval("(" + localStorage.getItem("collectHistory") + ")");
      if (collection) {
        for (let i = 0; i < collection.length; i++) {
          let songSheetId = collection[i];
          this.$http.get("/playlist/detail?id=" + songSheetId).then((data) => {
            this.collectHistory.push(data.data.playlist);
          });
        }
      }
    },
    // 加载更多
    loadMore() {
      this.newSongspage++;
      if (this.newSongspage > 10) {
        return false;
      }
      this.isLoading = true;
      this.newSongs();
    },
  },
};
</script>
<style lang="less">
.musicHome {
  .chose {
    width: 100%;
    display: flex;
    background-color: #ded2db;
    color: #5e0f0f;
    p {
      flex: 1;
      text-align: center;
      padding: 10px;
    }
    .white {
      background-color: white;
      border-bottom: 2px solid #cc99cc;
    }
  }
  .artist {
    width: 100%;
    padding: 5px 10px;
    box-sizing: border-box;
    ul {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      justify-content: space-between;
      li {
        width: 32%;
        text-align: center;
        margin-bottom: 1rem;
        a {
          display: inline-block;
          width: 100%;
          height: 7rem;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 10px;
            box-shadow: 0px 1px 4px #a2a0a0;
          }
        }
      }
    }
  }
  .newSongs {
    .songlist {
      li {
        display: flex;
        margin: 20px 10px;
        position: relative;
        // align-content: center;
        align-items: center;
        img {
          width: 7.2rem;
          margin-right: 10px;
          border-radius: 10px;
        }
        .newSongsDetail {
          margin: 0px 4px;
          .songname {
            width: 95%;
            margin-bottom: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .artistname {
            font-size: 14px;
          }
        }
        .playbtn {
          background: url(../assets/index_icon.png) no-repeat;
          width: 22px;
          height: 22px;
          background-size: 166px 97px;
          background-position: -24px 0px;
          // margin-right: 8px;
          display: inline-block;
          position: absolute;
          // top: 10px;
          right: 10px;
        }
      }
    }
  }
  .toplist {
    .list {
      ul {
        li {
          display: flex;
          margin: 20px 10px;
          img {
            flex: 1;
            width: 130px;
            border-radius: 10px;
          }
          a {
            flex: 2;
            width: 50%;
            margin-left: 10px;
            text-decoration: none;
            .topListDetail {
              margin-top: 15px;
              .topListtitle {
                color: #4976a8;
                font-size: 20px;
              }
              .description {
                width: 97%;
                margin-top: 10px;
                color: black;
                // white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
              }
            }
          }
        }
      }
    }
  }
  .coll{
    margin-top: 15px;
     .collectList {
    margin: 10px 5px;
    padding: 0px;
    li {
      margin: 5px 4px;
      float: left;
      width: 31%;
      height: 100%;
    }
  }
  }
 
  .loadingmore {
    text-align: center;
    line-height: 40px;
    color: #7b7b7b;
  }
  .clear {
    clear: both;
  }
  .noContent {
    font-size: 14px;
    color: grey;
    text-align: center;
    margin-bottom: 30px;
  }
}
</style>